<template>
  <div class="joke-view">
    <BaseBox>
      <template #title>
        <span @click="$store.commit('addNumWith5')">{{ $store.state.num }}</span>
        <p @click="$store.commit('addNumWithSome', 10)">{{ $store.state.num }}</p>
        <BaseTitle>开心一笑😁</BaseTitle>
      </template>
      <div class="content">
        <base-button type="success" @click="getJoke">获取新笑话</base-button>
        <p class="text">{{ joke }}</p>
      </div>
    </BaseBox>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "JokeView",
  data() {
    return {
      joke: "",
    };
  },

  async created() {
    let res = await axios({
      url: "http://ajax.zllhyy.cn/joke",
    });

    this.joke = res.data;
  },

  methods: {
    async getJoke() {

      let res = await axios({
        url: "http://ajax.zllhyy.cn/joke",
      });

      this.joke = res.data;
    },
  },
};
</script>

<style lang="less" scoped>
.joke-view {
  .time {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .base-switch {
      margin-right: 5px;
    }
  }
  .text {
    font-size: 30px;
    color: #6a4d52;
    cursor: pointer;
  }
}
</style>
